import type { NextPage } from 'next'
import Head from 'next/head'
import { ChangeEvent, useState } from 'react'
import styles from '../../../styles/sign-up.module.scss'
import { userType } from './types'

const SignUn: NextPage = () => {
  const [userData, setUserData] = useState<userType>({
    nickname: '',
    password: ''
  })

  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setUserData({ ...userData, [e.target.name]: e.target.value })
  }

  return (
    <>
      <Head>
        <title>Sign Up</title>
      </Head>
      <div className={styles.container}>
        <h1>Sign-Up Page</h1>
        <div>
          <input
            type='text'
            name={'nickname'}
            id={'nickname'}
            value={userData.nickname}
            onChange={(e) => changeHandler(e)}
          />
          <input
            type='text'
            name={'password'}
            id={'password'}
            value={userData.password}
            onChange={(e) => changeHandler(e)}
          />

          <button onClick={() => console.log(userData)}>QQ</button>
        </div>
      </div>
    </>
  )
}

export default SignUn
